<style>
    .dhh-applist-tab {
        height: 789px;
        margin-top: 10px;
        float: left;
        width: 100%;
    }
    
    .click-opraty {
        font-size: 20px;
        cursor: pointer;
        margin: 5px;
    }
    
    .input-box {
        height: 30px;
        float: left;
        width: 100%;
        margin-top: 30px;
        margin-left: 30px;
    }
    
    .input-line-1 {
        height: 30px;
        display: inline-block;
        float: left;
        margin-bottom: 5px;
        width: 40%;
    }
    
    .input-line-1 label {
        height: 30px;
        width: 30%;
        float: left;
        line-height: 30px;
        -text-indent: 10px;
        text-align: right;
        padding-right: 2%;
    }
    
    .input-line-1 input,
    .input-line-1 select {
        height: 30px;
        width: 60%;
        float: left;
        border: solid 1px lightgray;
        text-indent: 15px;
    }
</style>
<div id="dhh-applist-edit" class="show_page_content">
    <!-- 顶部按钮 -->
    <div class="top_btn">
        <div class="input-line auto_14">
            <label for="">app:</label>
            <input type="text" placeholder="请输入app名称" id="app_name">
        </div>

        <div class="layui-btn input-line" id="hometotal-search"><i class="fa fa-search"></i>搜索</div>
    </div>
    <div class="dhh-applist-tab">
        <table id="dhh-applist-table" lay-filter="order"></table>
    </div>
</div>
<div id="dhh-add-app" class="show_page_content" style="display:none;">

    <div class="input-box">
        <div class="input-line-1">
            <label for=""><span style="color:indianred">*</span>APP标题：</label>
            <input type="text" placeholder="请输入APP标题" class="app_title1 val" field="title" index="0" maxlength="10">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for=""><span style="color:indianred">*</span>APP简介：</label>
            <input type="text" placeholder="请输入APP简介" class="app_title2 val" field="title2" index="1" maxlength="20">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for="">额度范围(元)：</label>
            <input type="text" placeholder="请输入额度范围" class="app_num val" field="money" rexg="(^[0-9]+\-[0-9]+$)|(^[0-9]+\-[0-9]+w$)/" msg="格式不正确！，0000-0000或0000-1w" rexIndex="0">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for=" ">最高额度(元)：</label>
            <input type="text " placeholder="请输入最高额度" class="app_num val" field="maxmoney" rexg="^[0-9]{0,2}\-[0-9]{0,2}$" msg="格式不正确，00-00" rexIndex="1">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for=" ">最低费率(小数后两位)：</label>
            <input type="text " placeholder="请输入低费率" class="app_num val" field="minfeilv" rexg="^[0-9]+\.?[0-9]{0,2}$" msg="格式不正确，整数或小数后两位！" rexIndex="2">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for=" ">贷款期限：</label>
            <input type="text " placeholder="请输入贷款期限" class="app_num val" field="yunjiage" rexg="^[0-9]+\.?[0-9]*$" msg="格式不正确，整数或小数！" rexIndex="3">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for=" ">最长期限(天)：</label>
            <input type="text " placeholder="请输入最长期限(天)" class="app_num val" field="maxdate" rexg="^[0-9]+\.?[0-9]*$" msg="格式不正确，整数或小数！" rexIndex="4">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for=" ">参与人数：</label>
            <input type="text " placeholder="请输入参与人数" class="app_num val" field="zongrenshu" rexg="^[0-9]+$" msg="格式不正确，必须为整数！" rexIndex="5">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for=" " style="width:18%;"><span style="color:indianred">*</span>缩略图：</label>
            <img src="" id="show_img" style="height:30px;width:auto;float: left;margin-right: 1%;">
            <input type="file" id="hiddent-file" style="display:none;">
            <input type="text " placeholder="请选择图片" class="app_img" readonly style="width:40%">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for="">开始时间:</label>
            <input type="text" placeholder="请输入开始时间" class="stime val" field="on_shell_time">
        </div>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for="">结束时间:</label>
            <input type="text" placeholder="请输入结束时间" class="etime val" field="off_shell_time">
        </div>
    </div>
    <div class="input-box">
        <div class="input-line-1 ">
            <label for=" ">链接：</label>
            <input type="text " placeholder="请输入链接" class="app_url val" field="content" rexg="^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$" msg="格式不正确" rexIndex="6">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 ">
            <label for=" ">每日uv量：</label>
            <input type="text " placeholder="请输入每日uv量" field="uv_day" class="app_num val" rexg="^[0-9]+$" msg="格式不正确，必须为整数！" rexIndex="7">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 ">
            <label for=" ">产品单价：</label>
            <input type="text " placeholder="请输入产品单价" field="price" class="app_num val" rexg="^[0-9]+\.?[0-9]*$" msg="格式不正确，整数或小数！" rexIndex="8">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1 ">
            <label for=" ">是否为马甲包：</label>
            <select type="text " id="channel_name" class="val" field="is_mj">
                
                <option value="0">正式包</option>
                <option value="1">马甲包</option>
            </select>
        </div>
    </div>
</div>
<script>
    layui.use(["table"], function() {
        var laytab = layui.table;
        //laydate 时间控件
        var heigth = $("#page-container").height() - 80;
        $(".dhh-applist-tab").height(heigth);
        //搜索
        $("#hometotal-search").on("click", function() {
            laytab.reload('usertable', {
                where: {
                    title: $("#app_name").val(),
                }
            });
        });
        laytab.on('edit(order)', function(obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据  
            var index = null;
            $.ajax({
                url: "/app/app_range",
                type: "post",
                data: {
                    id: obj.data.id,
                    order: obj.value
                },
                dataType: "json",
                beforeSend: function() {
                    index = layer.load(0);
                },
                success: function(d) {
                    layer.close(index);
                    if (d.result == "1") {
                        layer.msg("操作成功！", {
                            icon: 1
                        });
                        laytab.reload('usertable', {
                            where: {
                                title: $("#app_name").val(),
                            }
                        });
                    } else {
                        layer.msg("操作失败！", {
                            icon: 2
                        });
                    }
                },
                error: function() {
                    layer.close(index);
                    layer.msg("网络异常！", {
                        icon: 2
                    });
                }
            })
        });
        renderTable();

        function renderTable() {
            laytab.render({
                elem: '#dhh-applist-table',
                height: heigth,
                url: "/app/app_list_admin",
                method: "get",
                id: "usertable",
                response: {
                    statusName: "result",
                    msgName: 'tips' //规定状态信息的字段名称，默认：msg
                        ,
                    countName: 'total' //规定数据总数的字段名称，默认：count
                        ,
                    dataName: 'rows',
                    statusCode: 1 //规定成功的状态码，默认：0
                },
                request: {
                    pageName: 'page' //页码的参数名称，默认：page
                        ,
                    limitName: 'lines' //每页数据量的参数名，默认：limit
                },
                where: {
                    title: $("#app_name").val()
                },
                done: function(d) {
                    $(".layui-none").text(d.tips);
                },
                parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "result": res.result, //解析接口状态
                        "tips": res.tips, //解析提示文本
                        "total": res.total, //解析数据长度
                        "rows": res.rows //解析数据列表
                    }
                },
                cols: [
                    [{
                        title: "排序",
                        field: "order",
                        width: 60,
                        height: 38,
                        edit: true,
                        unresize: true,
                    }, {
                        title: "ID",
                        field: "id"
                    }, {
                        title: "App标题",
                        field: "title"
                    }, {
                        title: "logo",
                        field: "thumb",
                        height: 70,
                        unresize: true,
                        templet: function(d) {
                            return "<img src='" + d.thumb + "' style='width:50px;height:50px;margin:0px;'>";
                        }
                    }, {
                        title: "简介",
                        field: "title2"
                    }, {
                        title: "额度范围(元)",
                        field: "money"
                    }, {
                        title: "日费率",
                        field: "jiage"
                    }, {
                        title: "贷款期限",
                        field: "yunjiage"
                    }, {
                        title: "参与人数",
                        field: "zongrenshu"
                    }, {
                        title: "状态",
                        field: "state",
                        unresize: true,
                        templet: function(d) {
                            if (d.state == 1) {
                                return "<span style='color:#5FB878;'>启用</span>";
                            } else {
                                return "<span style='color:#FF5722;'>停用</span>";
                            }
                        }
                    }, {
                        title: "链接地址",
                        field: "content",
                        width: "30%"
                    }, {
                        title: "管理",
                        unresize: true,
                        width: "10%",
                        templet: function(d) {

                            return "<a class='click-opraty'><i class='layui-icon layui-icon-edit edit' data= " + JSON.stringify(d) + " style='color:#393D49;'></i></a>" +
                                "<a class='click-opraty'><i class='layui-icon layui-icon-set-fill set' uid='" + d.id + "' state='" + d.state + "' style='color:#393D49;'></i></a>" +
                                "<a class='click-opraty'><i class='layui-icon layui-icon-delete del' uid='" + d.id + "' style='color:#393D49;'></i></a>";
                        }
                    }]
                ],
                page: true,
                limits: [20, 50, 100],
                limit: 20,
                loading: true,
                skin: {
                    even: true
                },
            });
        }

        function zero(m) {
            return m < 10 ? "0" + m : m;
        }

        function laydateOPtion(ele, fn) {
            return {
                elem: ele, //需显示日期的元素选择器
                event: 'click', //触发事件
                type: "date",
                istime: false, //是否开启时间选择
                isclear: true, //是否显示清空
                istoday: true, //是否显示今天
                issure: true, //是否显示确认
                festival: true, //是否显示节日
                lang: "zh-CN",
                fixed: false, //是否固定在可视区域
                zIndex: 99999999, //css z-index
                btns: ['confirm'],
                done: fn,
            }
        }

        changeRow("#dhh-applist-edit .set", "/app/app_start_stop", {
            id: 0,
            state: 0
        }, function() {
            laytab.reload('usertable', {
                where: {
                    title: $("#app_name").val(),
                }
            });
        });
        delRow("#dhh-applist-edit .del", "/app/app_del", function() {
            laytab.reload('usertable', {
                where: {
                    title: $("#app_name").val(),
                }
            });
        });
        $("#dhh-applist-edit").on("click", ".edit", function() {

            var rex = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
            var that = this;
            var id = null;
            var indexLx = layer.open({
                type: 1,
                shade: 0.6,
                title: "修改APP信息",
                area: [$(document).width() * 0.4 + "px", $(document).height() * 0.7 + "px"],
                btn: ["修改"],
                id: "edit-applist",
                content: $("#dhh-add-app").html(),
                yes: function() {
                    var y = 0;
                    for (var i = 0; i < rex.length; i++) {
                        y += rex[i];
                    }
                    if ($(".app_title1").eq(1).val() == "") {
                        layer.msg("APP标题为必填项！");
                    } else if ($(".app_title2").eq(1).val() == "") {
                        layer.msg("APP简介为必填项！");
                    } else if ($(".app_img").val() == "") {
                        layer.msg("APPlogo为必填选择！");
                    } else {
                        if (y == 0) {
                            var fdata = new FormData();
                            for (var i = 0; i < $(".val").length; i++) {
                                if ($(".val").eq(i).val() != "") {
                                    fdata.append($(".val").eq(i).attr("field"), $(".val").eq(i).val());
                                }
                            }
                            fdata.append("id", id);
                            if ($("#hiddent-file")[0].files[0] != undefined) {

                                fdata.append("logo", $("#hiddent-file")[0].files[0]);
                            }
                            $.ajax({
                                url: "/app/app_edit",
                                type: "post",
                                data: fdata,
                                dataType: "json",
                                processData: false,
                                contentType: false,
                                beforeSend: function() {
                                    loadIndex = layer.load(0);
                                },
                                success: function(d) {
                                    layer.close(loadIndex);
                                    if (d.result == "1") {
                                        layer.msg("添加成功！", {
                                            icon: 1,
                                            time: 2000
                                        });
                                        layer.close(indexLx);
                                        laytab.reload('usertable', {
                                            where: {
                                                title: $("#app_name").val(),
                                            }
                                        });
                                    } else {
                                        layer.close(loadIndex);
                                        layer.msg("添加失败！", {
                                            icon: 1,
                                            time: 2000
                                        });
                                    }
                                },
                                error: function() {

                                    layer.close(loadIndex);
                                    layer.msg("网络异常失败！", {
                                        icon: 1,
                                        time: 2000
                                    });
                                }
                            });
                        }

                    }
                },
                success: function() {
                    var e = $("#edit-applist .val");
                    var data = JSON.parse($(that).attr("data"));
                    id = data.id;
                    for (var i = 0; i < e.length; i++) {
                        if (e.eq(i)[0].nodeName == "INPUT") {
                            e.eq(i).val(data[e.eq(i).attr("field")]);
                        } else {
                            //e.eq(i).find("option")
                            if (data[e.eq(i).attr("field")] == "is_mj") {
                                if (data[e.eq(i).attr("field")] == "0") {
                                    e.eq(i).find("option").eq(0)[0].selected = "selected";
                                } else {
                                    e.eq(i).find("option").eq(1)[0].selected = "selected";
                                }
                            }

                        }
                    }
                    $("#show_img")[0].src = data.thumb;
                    $(".app_img").val(data.thumb);
                    layui.use(["laydate"], function() {
                        layui.laydate.render(laydateOPtion("#edit-applist .stime",
                            function(value, date, endDate) {
                                var eDateStr = $("#edit-applist .etime").val();
                                var sDateStr = value;
                                if (sDateStr && eDateStr) {
                                    var startDateTime = new Date(sDateStr).getTime();
                                    var endDateTime = new Date(eDateStr).getTime();
                                    if (endDateTime <= startDateTime) {
                                        layer.msg("开始时间不能大于等于结束时间!", {
                                            time: 3000,
                                            icon: 0
                                        });
                                        var ele = this.elem[0];
                                        setTimeout(function() {
                                            ele.value = "";
                                        }, 400);

                                    } else {

                                    }
                                }

                            }));
                        layui.laydate.render(laydateOPtion("#edit-applist .etime",
                            function(value, date, endDate) {
                                var eDateStr = value;
                                var sDateStr = $("#edit-applist .stime").val();
                                if (sDateStr && eDateStr) {
                                    var startDateTime = new Date(sDateStr).getTime();
                                    var endDateTime = new Date(eDateStr).getTime();
                                    if (endDateTime <= startDateTime) {
                                        layer.msg("结束时间不能小于等于结束时间!", {
                                            time: 3000,
                                            icon: 0
                                        });
                                        var ele = this.elem[0];
                                        setTimeout(function() {
                                            ele.value = "";
                                        }, 400);

                                    } else {

                                    }
                                }

                            }));
                    })


                    function GetLength1(str) {
                        var realLength = 0;
                        for (var i = 0; i < str.length; i++) {
                            charCode = str.charCodeAt(i);
                            if (charCode >= 0 && charCode <= 128)
                                realLength += 1;
                            else
                                realLength += 2;
                        }
                        return realLength;
                    }
                    $(".app_title1").on("input", function() {
                        var v = GetLength1(this.value);
                        $(this).parent().next().html("<span style='color:indianred'>还能输入" + (10 - v) + "个字符</span>");
                    });
                    $(".app_title2").on("input", function() {
                        var v = GetLength1(this.value);
                        $(this).parent().next().html("<span style='color:indianred'>还能输入" + (20 - v) + "个字符</span>");
                    });
                    $(".app_num").on("input", function() {
                        if (new RegExp($(this).attr("rexg")).test($(this).val()) || $(this).val() == "") {
                            $(this).parent().next().html("");
                            $(this).css("border", "solid 1px lightgray");
                            rex[Number($(this).attr("rexIndex"))] = 0;
                        } else {
                            $(this).parent().next().html("<span style='color:indianred'>" + $(this).attr("msg") + "</span>");
                            $(this).css("border", "solid 1px indianred");
                            rex[Number($(this).attr("rexIndex"))] = 1;
                        }
                    });
                    $(".app_url").on("focus", function() {
                        $(this).parent().next().html("");
                        $(this).css("border", "solid 1px lightgray");

                        rex[Number($(this).attr("rexIndex"))] = 0;
                    });
                    $(".app_url").on("blur", function() {
                        if ($(this).val() != "") {
                            if (!new RegExp($(this).attr("rexg")).test($(this).val())) {
                                $(this).parent().next().html("<span style='color:indianred'>" + $(this).attr("msg") + "</span>");
                                $(this).css("border", "solid 1px indianred");
                                rex[Number($(this).attr("rexIndex"))] = 1;
                            } else {
                                rex[Number($(this).attr("rexIndex"))] = 0;

                            }
                        }

                    });
                    $(".app_url").on("input", function() {
                        $(this).parent().next().html("");
                        $(this).css("border", "solid 1px lightgray");


                    });
                    var URL = window.URL || window.webkitURL;

                    $(".app_img").on("click", function() {
                        $("#hiddent-file").click();
                    });
                    $("#hiddent-file").on("change", function() {
                        var videoUrl = URL.createObjectURL(this.files[0]);
                        $(".app_img").val(videoUrl);
                        $("#show_img").attr("src", videoUrl);
                    });
                }
            });
        });

    });
</script>